﻿<!DOCTYPE html>
<html>
<head>
    <title>CGI</title>
</head>
<body>
    <h1>Our Page</h1>
    <script>
        //01
        //executing the function will not effect global variable, even same name
       
        var description = 'original product';
        function updateProduct() {
            vardescription = 'updated product';
        }
        updateProduct();
        console.log(description);
       

        //02
        //here description will be looked up into function expression updateProductId, it's not there
        //then it will look up heirarchy function updateProduct, it's there
        //then finally global scope
        /*
        function updateProduct() {
            var description = 'updated product';
            var updateProductId = function () {
                console.log(description);
            }
            updateProductId();
        }
        updateProduct();
        */

        //03
        //description var neither in inner function expression nor in outer function, hence get value from global scope
        /*
        var description = 'original product';
        //var description = 'original product';
        function updateProduct() {
            var updateProductId = function () {
                console.log(description);
            }
            updateProductId();
        }
        updateProduct();
        */
    </script>
</body>
</html>